<template>
	<view id="form-box" class="form-box">
		<view class="mobile-roll-up-box">
			<keep-times></keep-times>
		</view>

		<button class="mobile-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<image class="submit-btn" mode="widthFix" :src="btnImg">
			</image>
		</button>

		<!-- <view class="submit" @click="submitMethod">
			<image class="submit-btn" mode="widthFix" :src="btnImg">
			</image>
		</view> -->

		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<!-- backgroundColor="#3383FC" -->
				<checkbox :checked="formData.isAgreement" color="#ffffff" style="border-radius: 100%;transform: scale(0.7);" />
			</checkbox-group>
			<view style="text-align: center;">
				<text class="text" @click="agreementChange">
					我已阅读并同意
				</text>
				<text class="tip-color" @click.stop="showAgreementHandler(1)">《隐私保护指引》</text>
				<text class="tip-color" @click="xieyi('https://web.78keji.cn/xieyi/#/')">《会员服务协议》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(2)">《产品说明》</text>
				<text class="text">
					协议
				</text>
				<view class="tip-text">
					业务资费：首周免费，续订29.9元/月(可随时取消）
				</view>
				
				<view class="tip-text">
				续订权益：29.9元=keep会员周卡+热门会员多选1
				</view>
				<view class="tip-text">
					客服热线：400-8825-010
				</view>
			</view>

		</view>
		<!-- 	<view class="tip-text">
			喜马拉雅连续包月联合会员权益（ 首次0.01元）
		</view> -->

		<keep-tcq-agreement v-if="isShowAgreement" @ok="isShowAgreement=false"
			:agreementType="agreementType" :rootImagePath="baseImagePath"></keep-tcq-agreement>
		<keep-tcq-agreement-confirm v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler"
			@cancel="isShowAgreementConfirm = false"
			@showAgreement="showAgreementHandler"></keep-tcq-agreement-confirm>
		<keep-tcq-right-fix :baseImagePath="baseImagePath" @showAgreement="showAgreementHandler"></keep-tcq-right-fix>
	</view>

</template>

<script>
	import httpUtil from "@/utils/httpUtil.js";
	import validParamsUtil from "@/utils/validParamsUtil.js";
	import messageUtil from "@/utils/messageUtil.js"
	import userApi from "@/api/userApi.js"
	import logApi from "../../api/logApi";
	import mobileApi from "../../api/mobileApi";
	import keepOrderApi from "../../api/keepOrderApi.js";
	import zfbUrlUtil from "../../utils/zfbUrlUtil";
	// import wxMiniPayHandler from "@/api/wxMiniPayHandler.js"


	export default {
		data() {
			return {
				formData: {
					mobile: '',
					code: '',
					isAgreement: false,
					isSubmit: false, // 是否已经提交过
					intervalId: '',
				},
				isNeedSendCode: false,
				isShowAgreement: false,
				agreementType: 1,
				sendCodeDownNumber: 0,
				sendCodeText: '获取验证码',
				isShowOrderSuccess: false,
				isShowInput: false,
				isShowAgreementConfirm: false,

			};
		},
		props: ['baseImagePath', 'btnImg', 'param', 'mobile'],
		computed: {

		},
		mounted() {
			// if (this.mobile) {
			// 	this.formData.mobile = this.mobile
			// 	inputPhone()
			// 	if (props.isNeedSendCode !== false) {
			// 		this.sendCodeHandler()
			// 	}

			// }
		},
		methods: {
		xieyi(){
		
				let url = zfbUrlUtil.wrapUrl('https://web.78keji.cn/xieyi/#/')
							
				my.ap.openURL({
					url: url,
					success: (res) => {
						console.log('openURL success', res)
					},
					fail: (err) => {
						console.log('openURL success', err)
					}
				});
		},
			agreementConfirmOkHandler() {
				this.formData.isAgreement = true
				this.submitMethod()
			},
			inputSuccess(mobile) {
				this.formData.mobile = mobile;
				this.submitMethod()
			},
			getPhoneNumber(e) {
				console.log('getPhoneNumber', e)
				mobileApi.getZfbAuthorizeMobile(e.detail.encryptedData, e.detail.sign, resMobile => {
					this.formData.mobile = resMobile
uni.setStorageSync('mobile', resMobile)
						uni.setStorageSync('mobile', resMobile)
					
					mobileApi.getYys(this.formData.mobile, getYysRes => {
						this.formData.province = getYysRes.Province
						this.formData.yys = getYysRes.Isp
						this.submitMethod()
					})
				})
			},
			showAgreementHandler(type) {

				this.agreementType = parseInt(type)
				this.isShowAgreement = true
			},
			inputPhone() {
				if (this.formData.mobile == 11) {
					this.formData.isAgreement = true;
					// getPhoneYunYingMethod()
					// autoSubmit();
					// this.$emit('inputMobile', formData.value.mobile)
				}
			},
			submitMethod() {
				if (!validParamsUtil.validPhone(this.formData.mobile)) {
					messageUtil.showFail('手机号格式不正确')
					return;
				}
				if (this.isNeedSendCode) {
					if (this.formData.code.length < 1) {
						messageUtil.showFail('请输入验证码')
						return;
					}
				}

				if (!this.formData.isAgreement) {
					this.isShowAgreementConfirm = true;
					// messageUtil.showFail('请同意并勾选协议')
					return;
				}

				this.submit()

			},

			submit() {
	
			keepOrderApi.submitOrderss(this.formData.mobile, 'ZY1510', this.formData.province, this.formData.yys,
				res => {
			
			
				})
			
			
				// let params = {
				// 	a: httpUtil.getA(),
				// 	phone: this.formData.mobile,
				// 	returnUrl: 'http://keep.syhy000.com/keep/five/?mobile=' + this.formData.mobile,
				// 	proCode:'ZY1510',
				// 	uuid: uni.getStorageSync('uuid'),
				// }
				// if (userApi.getParam()) {
				// 	params.param = userApi.getParam()
				// }
				// if(userApi.getUserId()){
				// 	params.openid = userApi.getUserId()
				// }

				// messageUtil.showLoading()
				// keepOrderApi.submitOrder(params, res => {
				// 	messageUtil.closeLoading()

				// 	let url = zfbUrlUtil.wrapUrl(res.data.paySchema)
				// 	console.log('跳转url', url);
				// 	// #ifdef H5
				// 	window.location.href = url
				// 	// #endif
				// 	// #ifdef MP-ALIPAY
				// 	my.ap.openURL({
				// 		url: url,
				// 		success: (res) => {
				// 			console.log('openURL success', res)
				// 		},
				// 		fail: (err) => {
				// 			console.log('openURL success', err)
				// 		}
				// 	});
				// 	// #endif
				// })

				// 下面是跳转到二确页面
				// uni.navigateTo({
				// 	url: '/pages/ximaLayaOrderConfirm/ximaLayaOrderConfirm?mobile=' + this.formData.mobile,
				// })
			},
			agreementChange(e) {
				this.formData.isAgreement = !this.formData.isAgreement;
			}
		}

	}
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}
	
		50% {
			transform: scale(1.1);
		}
	
		100% {
			transform: scale(1);
		}
	}
	
	//如果仅仅是<Button />
	button::after {
		border-style: none;
	}
	
	//如果给Button添加了type=primary属性
	button[type=primary] {
		border-style: none;
	}
	
	//如果给Button添加了 plain 的属性
	button[plain] {
		border-style: none;
	}
	
	//如果给Button添加了 type=primary 和 plain
	button[type=primary][plain] {
		border-style: none;
	}
	
	.form-box {
		
		margin-top: -190rpx;
	
		.mobile-roll-up-box {
			position: absolute;
			width: 90%;
			top: 890rpx;
			margin: 0 auto;
		}
		
		.count-down-time-box{
			margin-top:24rpx;
		}
	}
	
	.mobile-btn {
		background: none;
		padding: 0 20rpx 20rpx 20rpx;
	
		border: none;
		animation: butChange 1s infinite;
		box-shadow: none;
		border-style: none;
		margin-top: 20rpx;
		min-height: 170rpx;
	
		border::after {
			background: none;
			padding: 0;
			margin: 0;
			border: none;
			content: none;
			border-style: none;
		}
	
		.submit-btn {
	
			width: 90%;
			height: auto;
			display: block;
			margin: 0 auto;
		}
	
	}
	
	.title {
		font-size: 2.2rem;
		color: #302c2d;
		font-stretch: normal;
		letter-spacing: .1rem;
		text-align: center;
		font-weight: 600;
		position: relative;
	
	
		// >view {
		// 	border-bottom: solid 0.8rem #ffed8b;
		// 	display: inline-block;
		// 	height: 2.1rem;
		// }
	}
	
	.time {
		text-align: center;
		font-size: 2rem;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: .1rem;
		color: #f9ebcc;
		margin-top: .5rem;
		margin-bottom: 1rem;
	
		span {
			font-size: 1rem;
		}
	}
	
	.input-box {
		width: 100%;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 76rpx;
		position: relative;
	
	
		text {
			font-size: 32rpx;
			letter-spacing: 1rpx;
			color: #323232;
			text-align: left;
			display: inline-block;
			font-weight: 600;
			width: 26%;
			font-family: SourceHanSansCN-Medium;
		}
	
		.input {
			flex-grow: 1;
			height: 90rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 36rpx;
			letter-spacing: 1rpx;
			color: #313131;
			background-color: #ffffff;
			border-radius: 50rpx;
			padding-left: 20rpx;
	
			.input-placeholder {
				font-size: 36rpx;
				color: #313131 !important;
			}
	
		}
	
		.mobile-icon {
			// height: 76rpx;
			width: auto;
			height: 46rpx;
			position: absolute;
			top: 15rpx;
			right: 25rpx;
		}
	
	
	
	
		.type-list-box {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
	
			.item {
				padding: 9rpx;
				border-radius: 17rpx 12rpx;
				font-size: 26rpx;
				letter-spacing: 1rpx;
				background-color: #efefef;
				border: solid 1rpx #c2c2c2;
				color: #8e8e8e;
				margin-right: 27rpx;
	
				&:last-child {
					margin-right: 0;
				}
			}
	
			.current {
				background-color: #f0f8fd;
				border: solid 1rpx #94c0ff;
				color: #69a2eb;
			}
		}
	
		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #fb5f2b;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}
	
	.clauze {
		width: 100%;
		margin:  auto 0;
		text-align: left;
		padding: 0 !important;
		font-family: SourceHanSansSC-Light;
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
	
		.text {
			letter-spacing: 2rpx;
			font-size: 22rpx;
			color: white;
		}
	
		.tip-color {
			color: #fff316;
			font-size: 22rpx;
		}
	}
	
	.tip-text {
		letter-spacing: 2rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 16rpx;
	}
	
	
	.submit {
		width: 70%;
		margin: 40rpx auto 0;
		display: block;
		text-align: center;
		padding: 0;
	
		.submit-btn {
			animation: butChange 1s infinite;
			width: 100%;
			height: auto;
		}
	}
	
	.pay-type-icon {
		display: block;
		width: auto;
		width: 100%;
		margin-top: 30rpx;
	}
	
	
	.mobile-swiper {
		width: 94%;
		margin: 0 auto 24rpx;
		height: 90rpx;
		background: #FA7063;
		border-radius: 9rpx;
		padding: 24rpx 34rpx;
		box-sizing: border-box;
	
		.swiper-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFF0CD;
	
		}
	}
	
	.time-download {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx auto 42rpx;
	
		.icon {
			width: 39rpx;
			height: auto;
			display: block;
		}
	
		.title {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			margin: 0 17rpx;
	
			// >view {
			// 	border-bottom: solid 0.8rem #ffed8b;
			// 	display: inline-block;
			// 	height: 2.1rem;
			// }
		}
	
		.time-box {
	
			display: flex;
			align-items: center;
	
			.box {
				width: 46rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: linear-gradient(0deg, #FAE4A8, #FBF5DD);
				border-radius: 5rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 24rpx;
				color: #FA514A;
				text-align: center;
			}
	
			.split {
				height: 46rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				margin: 0 7rpx;
				display: flex;
				align-items: center;
			}
	
		}
	}
</style>